<template>
  <div class="app-container  bg-gray">
    <el-tabs type="border-card" class="box-1">
      <el-tab-pane label="腾讯云配置">
        <el-form ref="tencent" :model="tencent" :rules="tencentRules" label-width="160px">
          <el-form-item label="账号ID" prop="tencent_id">
            <el-input v-model="tencent['tencent_id']"/>
          </el-form-item>
          <el-form-item label="APPID" prop="tencent_appid">
            <el-input v-model="tencent['tencent_appid']" />
          </el-form-item>
          <el-form-item label="SecretId" prop="tencent_secretid">
            <el-input v-model="tencent['tencent_secretid']" />
          </el-form-item>
          <el-form-item label="SecretKey" prop="tencent_secrekey">
            <el-input v-model="tencent['tencent_secrekey']" />
          </el-form-item>
          <el-form-item label="系统邀请链接" prop="tencent_secrekey">
            <el-input v-model="tencent['tencent_invite_url']" />
          </el-form-item>
          <el-form-item label="小二维码" prop="tencent_secrekey">
            <ws-upload-single-img v-model="tencent['tencent_small_qr']" :path="tencent['tencent_small_qr']" width="80" height="80"/>
          </el-form-item>
          <el-form-item label="大二维码" prop="tencent_secrekey">
            <ws-upload-single-img v-model="tencent['tencent_big_qr']" :path="tencent['tencent_big_qr']" width="80" height="80"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="bg-green" @click="submitForm('tencent')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="代理商配置">
        <el-form ref="agent" :model="agent" :rules="agentRules" label-width="260px">
          <el-form-item label="是否开通默认付款权限">
            <el-radio-group v-model="agent['tencent_pay_status']">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="默认单笔付款额度">
            <el-input-number v-model="agent['tencent_pay_quota']" />
          </el-form-item>
          <el-form-item label="默认付款折扣(%)">
            <el-input v-model="agent['tencent_pay_discount']" type="number" style="width: 240px;"/>
          </el-form-item>
          <el-form-item label="不参与折扣产品（包含该字符）" prop="tencent_secrekey">
            <div v-for="(item, index) in agent['tencent_not_discount']" :key="index">
              <el-input v-model="agent['tencent_not_discount'][index]" placeholder="请输入产品名称" style="width: 240px;"/>
              <el-button v-if="agent['tencent_not_discount'].length>1" type="danger" icon="el-icon-minus" circle size="small" @click.prevent="removeItem(index)"/>
              <el-button v-if="index===agent['tencent_not_discount'].length-1" size="small" type="primary" icon="el-icon-plus" circle @click.prevent="addItem"/>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="bg-green" @click="submitForm('agent')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { encryptionString } from '@/utils/validate'
export default {
  data() {
    return {
      searchValue: '',
      id: '',
      tencent: {
        'tencent_id': '',
        'tencent_appid': '',
        'tencent_secretid': '',
        'tencent_secrekey': '',
        'tencent_invite_url': '',
        'tencent_big_qr': '',
        'tencent_small_qr': ''
      },
      tencentRules: {
        // 'tencent_id': [{ required: true, message: '请输入腾讯云账号id', trigger: 'blur' }],
        // 'tencent_appid': [{ required: true, message: '请输入Appid', trigger: 'blur' }],
        // 'tencent_secretid': [{ required: true, message: '请输入Secretid', trigger: 'blur' }],
        // 'tencent_secrekey': [{ required: true, message: '请输入Secrekey', trigger: 'blur' }]
      },
      agent: {
        tencent_pay_status: 0,
        tencent_pay_quota: '',
        tencent_pay_discount: '',
        tencent_not_discount: ['']
      },
      agentRules: {}
    }
  },
  created() {
    this.getSiteConfig()
  },
  methods: { encryptionString,
    /**
     *  获取腾讯云配置
     */
    getSiteConfig() {
      const url = 'tencent/tencentConfig'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        Object.assign(this.tencent, res.data.tencent);
        Object.assign(this.agent, res.data.agent)
        if (this.agent.tencent_not_discount.length === 0) {
          this.agent.tencent_not_discount.push('')
        }
        // 打码显示
        // this.form['tencent_id'] = this.encryptionString(this.form['tencent_id'], 3)
        // this.form['tencent_appid'] = this.encryptionString(this.form['tencent_appid'], 3)
        // this.form['tencent_secretid'] = this.encryptionString(this.form['tencent_secretid'], 5)
        // this.form['tencent_secrekey'] = this.encryptionString(this.form['tencent_secrekey'], 5)
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 动态删除项
    removeItem(index) {
        this.agent['tencent_not_discount'].splice(index, 1)
    },
    // 动态增加项
    addItem() {
      this.agent['tencent_not_discount'].push('')
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = 'tencent/updateTencentConfig'
          const data = Object.assign({}, this[formName])
          formName === 'agent' && (data.tencent_not_discount = data.tencent_not_discount.join(','));
          data.type = formName
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.getSiteConfig()
          }).catch(e => {
            this.$message.error(e.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  /*max-width: 1000px;*/
  margin: 0 auto;
  .el-form {
    max-width: 900px;
  }
}

.dialog {
  .el-input {
    width: 80%;
  }
}
</style>
